<template>
    <el-table :data="tableData" border style="width: 100%">
        <!-- 第一组表头 -->
        <el-table-column label="用户信息">
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="age" label="年龄" width="80" />
        </el-table-column>

        <!-- 第二组表头 -->
        <el-table-column label="联系方式">
            <el-table-column prop="email" label="邮箱" width="200" />
            <el-table-column label="电话"><!--  -->
                <el-table-column prop="phone.home" label="住宅电话" width="150" />
                <el-table-column prop="phone.mobile" label="手机" width="150" />
            </el-table-column>
        </el-table-column>

        <!-- 第三组表头 -->
        <el-table-column prop="address" label="地址" />
    </el-table>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

interface Phone {
    home: string
    mobile: string
}

interface User {
    name: string
    age: number
    email: string
    phone: Phone
    address: string
}

const data = ref([
    {
        name: "张三",
        age: 13,
        phone: "13659842019",
        friendInfo: [{
            name: "Jack",
            age: 15
        }, {
            name: "Mick",
            age: 16
        }],
    },
    {
        name: "张三",
        age: 13,
        phone: "13659842019",
        companyInfo: [{
            name: "中百超市",
            num: 3666
        }, {
            name: "中百易购",
            num: 899
        }],
    }
])

const tableData = reactive<User[]>([
    {
        name: '张三',
        age: 28,
        email: 'zhangsan@example.com',
        phone: { home: '010-12345678', mobile: '13800000000' },
        address: '北京市朝阳区某街道100号',
    },
    {
        name: '李四',
        age: 32,
        email: 'lisi@example.com',
        phone: { home: '021-87654321', mobile: '13900000000' },
        address: '上海市浦东新区某小区200号',
    },
    {
        name: '王五',
        age: 24,
        email: 'wangwu@example.com',
        phone: { home: '0755-12344321', mobile: '13700000000' },
        address: '深圳市南山区科技园300号',
    },
])
</script>
